<template>
   <section>
        <a href="#" v-for="(v,index) in sectionlist" :key="index">
            <img :src="v.img_big_logo" alt="" class="img1">
            <p class="txt">{{v.title}}</p>
            <p class="text">￥<b>{{v.current_price}}</b><span class="spantxt" v-if="comment[index]==6">满1享9折</span>
            </p>
            <p class="txt2" v-if="comment[index]>5">90天最低价</p>
            <div class="anniu">
                <img src="../../assets/ziyin.png" alt="" v-if="comment[index]>5">
                <span>{{comment[index]}}万+条评论</span>
                <button class="b2">看相似</button>
            </div>
        </a>
    </section>
</template>

<script>
export default {
    data() {
        return {
            comment: [20, 15, 6, 8, 7, 6, 3, 6, 5, 6, 5, 4, 6, 4, 7, 5],
            sectionlist: [],
           
        }

    },
    methods:{
    fun(resText) {
    for (let i = 0; i < resText.list.length; i++) {
        this.sectionlist.push({
            img_big_logo: resText.list[i]["img_big_logo"],
            title: resText.list[i]["title"],
            current_price: resText.list[i]["current_price"]
        })
    }
    }
},
mounted(){
this.$http({
            url:"http://localhost:8888/goods/list",
            method:"get"
        }).then(res=>{
             this.fun(res.data)
        })
}

}


</script>

<style lang="scss" scoped>
section {
    width: 100vw;
    height: auto;
    padding: 0 2.6667vw;
    box-sizing: border-box;
    column-count: 2;
    font-size: 3.2vw;
    margin-top: 5.3333vw;
}

$radius:1.3333vw;
section a {
    display: flex;
    width: 46.1333vw;
    height: auto;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: $radius;
    color: #000;
    break-inside: avoid;
    background: #fff;
    padding-bottom: .8vw;
    margin-bottom: 2.4vw;
}

section a img.img1 {
    width: 46.1333vw;
    height: 46.1333vw;
    margin-bottom: 2vw;
    border-top-left-radius: $radius;
    border-top-right-radius: $radius;
}

section a p,
section a .anniu {
    padding: 0 $radius;
}

section a p.txt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

section a .spantxt {
    display: inline-block;
    border: 1px solid red;
    font-size: 3.2vw;
    border-radius: $radius;
    margin-left: $radius;
}

section a p.txt2 {
    width: 18.6667vw;
    text-align: center;
    border-radius: $radius;
    background: rgb(235, 222, 228);
    margin-bottom: $radius;
    color: red;
    margin-left: 2vw;
}

section a p.text {
    color: #f00;
    font-size: 4.2667vw;
    margin: $radius 0;
}

section a p.text b {
    font-size: 4.8vw;
    color: #f00;
    font-weight: 500;
}

section a .anniu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section a .anniu span {
    color: #999999;
}

section a .anniu .b2 {
    width: 12vw;
    height: 5.3333vw;
    background: #f2f2f2;
    border: none;
    border-radius: 2.6667vw;
    font-size: 1.8667vw;
}

section a .anniu img {
    width: 6.4vw;
    height: 3.7333vw;
}

</style>